<div id="videoUploadBox" class="upload-wrap">
    <div class="image-item video-item" v-for="(item, index) in imageList" :key="index">
        <video :src="item.path" class="item-img" controls/>
        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true" v-on:click="removeImage(index)"></span>
    </div>
    <div id="upload-box-main" class="not-draggable" v-if="imageList.length < limit">
        <input type="file" id="file-input-video" style="display:none;" accept="video/*" v-on:change="fileUpload"/>
        <label for="file-input-video" class="file-button">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            <span style="margin-top:10px">上传视频</span>
        </label>
    </div>
</div>

<script>
    const videoStr = '{{ $videoStr ?? '' }}';
    
    $(function() {
        let videoVm = new Vue({
            el: '#videoUploadBox',
            data: {
                // 图片列表
                imageList: [],
                // 上传数量限制
                limit: 1
            },
            methods: {
                // 图片上传
                fileUpload(e) {
                    let formData = new FormData();
                    formData.append('file', e.target.files[0]);
                    formData.append('_token', $("input[name='_token']").val());
                    ajaxFileFunc('/admin/upload', formData, {}, res => {
                        videoVm.imageList.push({
                            id:res,
                            path: getImgUrlFunc(res)
                        })
                        videoVm.imgIdPush()
                    })
                },
                // 图片id传递
                imgIdPush() {
                    let imgIds = [];
                    videoVm.imageList.map(item => {
                        imgIds.push(item.id)
                    })
                    $("input[name='video_id']").val(imgIds.join(','))
                },
                // 删除图片
                removeImage(index) {
                    $.confirm({
                        title: '温馨提示',
                        content: '确认要删除该视频吗？',
                        buttons: {
                            '取消': function () {},
                            '确认': function () {
                                videoVm.imageList.splice(index, 1)
                                videoVm.imgIdPush()
                            }
                        }
                    });
                }
            },
            mounted() {
                let hrefArr = window.location.href.split('?')[0].split('/');
                if(hrefArr[hrefArr.length-1] === 'create') {
                    // 新增

                } else {
                    // 编辑
                    let imgIds = []
                    if($("input[name='video_id']").val()) {
                        imgIds = $("input[name='video_id']").val().split(',');
                    } else if(videoStr) {
                        imgIds = videoStr.split(',');
                    }
                    setTimeout(() => {
                        imgIds.map(item => {
                            videoVm.imageList.push({
                                id: item,
                                path: getImgUrlFunc(item)
                            })
                        })
                        videoVm.imgIdPush()
                    }, 1000);
                }
            }
        })
    })
</script>
